<template>
	<view class="toCertification">
		<view class="main">
			 <view class="title">
				请上传您的身份证正反面照片
			 </view>
		
		 	<view class="front" @click="upload_front(1)">
				<view class="imageWrap">
					<image v-if='!frontImage' src="../../static/image/frontModel.png" mode="aspectFit"></image>
					<image v-if='frontImage' :src="frontImage" mode="aspectFit"></image>
				</view>
		 		
				<view v-if='frontImage' class="changeImage">
					<i class='iconfont'>&#xe6e1;</i>
					<text>更换图片</text>
				</view>
		 	</view>
			<view class="front back" @click="upload_front(0)">
				<view class="imageWrap">
						<image v-if='!backImage' src="../../static/image/backModel.png" mode="aspectFit"></image>
						<image v-if='backImage' :src="backImage" mode="aspectFit"></image>
				</view>
				<view v-if='backImage' class="changeImage">
					<i class='iconfont'>&#xe6e1;</i>
					<text>更换图片</text>
				</view>
		 	</view>
			
			<view class="sub">
				<view class="line">
				</view>
				<view class="text">
					拍摄照片要求
				</view>
				<view class="line">
				</view>
				
			</view>
			<view class="imageModel">
				<image src="../../static/image/model.png" mode=""></image>
			</view>
			
		 </view>
		 <view class="next" :class="{red:frontImage && backImage }"  @click="next">
		 	下一步
		 </view>
		 
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
export default {
    data() {
        return {
            frontImage: '',
            backImage: ''
        };
    },
    methods: {
        next() {
            if (!this.frontImage) {
                uni.showToast({
                    title: '请上传身份证正面',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            if (!this.backImage) {
                uni.showToast({
                    title: '请上传身份证背面',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            uni.navigateTo({
                url:
                    './toCertification2?frontOfId=' +
                    this.frontImage +
                    '&backOfId=' +
                    this.backImage
            });
        },
        upload_front(e) {
            uni.chooseImage({
                count: 1,
                success: res => {
                    var tempFilePaths = res.tempFilePaths;
					uni.showLoading({
						title: '上传中...'
					});
                    uni.uploadFile({
                        url: 'http://grys.nervenets.com/file.upload',
                        filePath: tempFilePaths[0],
                        name: 'userfile',
                        formData: {},
                        header: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        success: res => {
                            // console.log(res);
							uni.hideLoading()
                            if (res.statusCode === 200) {
                                let data = JSON.parse(res.data);
                                // console.log(data.data);
                                uni.showToast({
                                    title: '上传成功',
                                    icon: 'none',
                                    duration: 1000
                                });
                                if (e) {
                                    this.frontImage = data.data;
                                } else {
                                    this.backImage = data.data;
                                }
                            }
                        }
                    });
                }
            });
        }
    },
    components: {
        uniIcon
    }
};
</script>

<style lang="less">
.toCertification {
    flex: 1;
    flex-direction: column;
    width: 100%;
    .main {
        flex-direction: column;
        padding: 30upx;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        .title {
            font-size: 28upx;
            height: 70upx;
            justify-content: center;
        }
        .front {
            // border: 1upx solid red;
            margin-bottom: 30upx;
            position: relative;
            justify-content: center;
            width: 70%;
            height: 320upx;
			.imageWrap{
				width: 100%;
				height: 100%;
				image {
					width: 100%;
					height: 100%;
					margin: 0;
				}
			}
            
            .changeImage {
                background: #505050;
                position: absolute;
                right: 0;
                bottom: 0;
                z-index: 5;
                color: white;
                font-size: 22upx;
                padding: 5upx 10upx;
                align-items: center;
                justify-content: center;
                .iconfont {
                    margin-right: 10upx;
                    font-size: 18upx;
                }
            }
        }
        .sub {
			width: 100%;
			flex-direction: row;
            height: 100upx;
            justify-content: center;
            align-items: center;
			.line{
				width: 30%;
				height: 2upx;
				background: #EEEEEE;
			}
			.text{
				font-size: 28upx;
				color: #666666;
				margin: 0 30upx;
			}
        }
        .imageModel {
            width: 100%;
            height: 150upx;
            image {
                width: 100%;
                height: 100%;
            }
        }
    }
    .next {
        position: fixed;
        bottom: 0;
        background: rgb(204, 204, 204);
        color: white;
        font-size: 34upx;
        width: 100%;
        height: 100upx;
        justify-content: center;
        align-items: center;
        margin: 20upx auto 0;
    }
    .red {
        background: #ff1268;
    }
}
</style>
